<template>
  <div class="about">
    <my-header>搜索</my-header>
    <my-input v-model="searchVal" @search="$router.push(`/?md=${searchVal}`)"></my-input>
    <!-- <my-input v-model="searchVal" @search="$router.push({path:'/',query:{md: searchVal}})"></my-input> -->
    <section>
      <span style="font-size:18px">搜索历史记录</span>
      <span @click="$store.commit('delect')">清空历史</span>
    </section>
    <ul class="history">
      <li v-for="(item,index) in $store.state.history" @click="serchBtn(item)">{{item}}</li>
    </ul>
  </div>
</template>
<script>
import myHeader from '../components/myHeader.vue'
import MyInput from '../components/myInput.vue'
import { ref } from 'vue';
// import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
export default {
  components: { myHeader, MyInput },
  setup(props) {
    // const store = useStore();
    const router = useRouter();
    const searchVal = ref('')
    // const search = () => {
    //   store.commit('addHistory',searchVal.value);
    //   router.push(`/?md=${searchVal.value}`);
    // }
    const serchBtn = (val) => {
       searchVal.value = val;
       router.push(`/?md=${val}`);
    }
    return {
      searchVal,
      serchBtn
      // search
    }
  }
}
</script>
<style lang="scss" scoped>
  section{
    height: 50px;
    background: cornflowerblue;
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    align-items: center;
  }
  .history{
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    li{
      padding: 5px 10px;
      border: 1px solid cornflowerblue;
      border-radius: 5px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
</style>